import { useTableScroll } from '@/hooks/useTableScroll';
import { getTallyBookAccountList } from '@/services/financial-center';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { history, useSearchParams } from '@umijs/max';
import { FormInstance } from 'antd/lib';
import { useEffect, useRef, useState } from 'react';

const Authentication = () => {
  const [count] = useState(0);
  const tableScrollHeight = useTableScroll({}, count);
  const actionRef = useRef<ActionType>();
  const [searchParams, setSearchParams] = useSearchParams();
  const formRef = useRef<FormInstance>();
  const columns: ProColumns<any>[] = [
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '企业名称',
      dataIndex: 'alipayName',
      width: 160,
      order: 3,
    },
    {
      title: '支付宝账号',
      dataIndex: 'alipayNickName',
      width: 180,
      order: 1,
    },
    {
      title: '签约状态',
      dataIndex: 'signStatus',
      width: 160,
      order: 3,
      valueType: 'select',
      fieldProps: {
        defaultValue: '',
      },
      hideInSearch: true,
      valueEnum: {
        '': { text: '不限' },
        TEMP: { text: '签约中' },
        STOP: { text: '已解约' },
        NORMAL: { text: '已签约' },
      },
      render: (_, record) => {
        const obj = {
          TEMP: { text: '签约中' },
          STOP: { text: '已解约' },
          NORMAL: { text: '已签约', className: 'text-[#67c23a]' },
        } as any;
        return (
          <div {...obj[record.signStatus]}>{obj[record.signStatus].text}</div>
        );
      },
    },
    {
      title: '记账本账号',
      dataIndex: 'bookId',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '企业认证状态',
      dataIndex: 'auditStatus',
      width: 160,
      order: 2,
      valueType: 'select',
      valueEnum: {
        '': { text: '不限' },
        init: { text: '待认证' },
        auditing: { text: '实名审核中' },
        fail: { text: '认证失败' },
        normal: { text: '已认证' },
      },
      fieldProps: {
        defaultValue: '',
      },
      render: (_, record) => {
        const obj = {
          init: { text: '待认证' },
          auditing: { text: '实名审核中' },
          fail: { text: '认证失败', className: 'text-[red]' },
          normal: { text: '已认证', className: 'text-[#67c23a]' },
        } as any;
        return (
          <div {...obj[record.auditStatus]}>{obj[record.auditStatus].text}</div>
        );
      },
    },
    {
      title: '提交时间',
      dataIndex: 'auditSubmitTime',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '审核时间',
      dataIndex: 'auditTime',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: '',
      hideInSearch: true,
      fixed: 'right',
      width: 260,
      render: (_, record) => {
        return (
          <div className="flex gap-3">
            <span
              className={`${
                record.signStatus === 'NORMAL' ? '' : 'hidden'
              } text-[#00bdff] cursor-pointer`}
              onClick={() => {
                history.push(
                  `/account-center/sign-manager/authentication-center/submitAuthentication?id=${record.id}`,
                );
              }}
            >
              {['auditing', 'normal'].includes(record.auditStatus)
                ? '查看认证材料'
                : '提交认证材料'}
            </span>
          </div>
        );
      },
    },
  ];

  useEffect(() => {
    if (searchParams.get('alipayNickName')) {
      formRef.current?.setFieldValue(
        'alipayNickName',
        searchParams.get('alipayNickName'),
      );
    }
  }, [searchParams.get('alipayNickName')]);

  return (
    <div>
      <ProTable
        scroll={{ y: tableScrollHeight, x: 200 }}
        rowKey="id"
        formRef={formRef}
        search={{
          labelWidth: 'auto',
          submitterColSpanProps: {
            offset: 0,
            span: 2,
          },
        }}
        onReset={() => {
          setSearchParams({});
        }}
        request={async (params: any) => {
          const { current, ...rest } = params;
          const searchData = {
            pageNo: current - 1,
            ...rest,
            signStatus: 'NORMAL',
            alipayNickName: searchParams.get('alipayNickName') || '',
          };
          try {
            const { data, count, success } = (await getTallyBookAccountList(
              searchData,
            )) as any;
            if (success) {
              return {
                data,
                total: count,
                success,
              };
            }
            return {
              data: [],
              total: count,
              success: true,
            };
          } catch (error) {
            return {
              data: [],
              success: false,
            };
          }
        }}
        columns={columns}
        pagination={{
          defaultPageSize: 20,
          showQuickJumper: true,
          showSizeChanger: true,
        }}
        actionRef={actionRef}
        cardBordered
        columnsState={{
          defaultValue: {
            option: { fixed: 'right', disable: true },
          },
        }}
      />
    </div>
  );
};

export default Authentication;
